<template>
	<view class="cart-cantainer" v-if="cart.length">
		<view class="cart-address">
			<my-address></my-address>
		</view>
		<view class="cart-list">
			<view class="list-title">
				<uni-icons type="shop" size="20"></uni-icons>
				<text class="word">购物车</text>
			</view>
			<uni-swipe-action>
				<block v-for="(item, i) in cart" :key="i">
					<!-- uni-swipe-action-item 商品左滑展示删除按钮 -->
					<uni-swipe-action-item :right-options="options" @click="action(item)">
						<my-goods :goods="item" :showRadio="true" @radioChange="radio" @numChange="num"></my-goods>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
		</view>
		<my-settle></my-settle>
	</view>
	<view v-else class="no-data">
		<image src="../../static/img/cart_empty@2x.png"></image>
		<text>空空如也~</text>
	</view>
</template>

<script>
	// 在很多页面都需要将购物车tabbar展示数字图标，所以要封装为mixin
	import { mapState, mapMutations } from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				options: [
					{
						text: '删除',
						style: {
							bacgroundColor: '#C00000'
						}
					}
				]
			};
		},
		computed: {
			...mapState('m_cart', ['cart'])
		},
		// onShow() {
		// 	// 在页面刚展示的时候触发
		// 	this.setBadge()
		// },
		methods: {
			// // 在添加购物车页面，跳转到cart页面，tabbar的购物车也要显示对应的数字图标展示
			// setBadge() {
			// 	uni.setTabBarBadge({
			// 		index: 2, // 购物车在tabbar中的索引，从左0开始到右
			// 		text: this.total + '' // text必须为字符串，所以 + '' 转换为字符串
			// 	})
			// }
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
			radio(e) {
				this.updateGoodsState(e)
			},
			num(e) {
				console.log(e)
				this.updateGoodsCount(e)
			},
			action(item) {
				this.removeGoodsById(item.goods_id)
			}
		}
	}
</script>

<style lang="scss">
.cart-cantainer {
	padding: 0 5px 50px;
	.cart-address {
		
	}
	.cart-list {
		.list-title {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 5px 0;
			.word {
				color: gray;
				font-size: 14px;
				margin-left: 5px;
			}
		}
	}
}
.no-data {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 150px;
	image {
		width: 90px;
		height: 90px;
		margin-bottom: 10px;
	}
	text {
		font-size: 12px;
		color: gray;
	}
}
</style>
